<template>
  <div class="slider">
    <div>
      <el-form :inline="true" class="demo-form-inline single-form-inline  pickerOption formData themeDesc" size="small" >
        <el-form-item label="主题描述" class="" style="font-weight:bold;">
          <el-input v-model="theme.themeDescription" style="font-weight:bold;color:#333;"></el-input>
        </el-form-item>
      </el-form>
      <div v-if="edit">
        <el-upload class="upload-demo" ref="upload" action="/file/uploadFile"
                   :data="dataSetParam" :show-file-list="false" :on-success="imgSuccess"
                   :multiple="true" accept="video/*,image/*" :auto-upload="true" :headers="headersSet">
          <div slot="trigger"  class="up" >上传</div>
        </el-upload>
      </div>

      <div style="margin: 15px 0;position: relative">
        <swiper :options="swiperOption"  :ref="'mySwiper'+index" class="swiperWidth">
          <!-- 这部分放你要渲染的那些内容 -->
          <swiper-slide v-for="(it,index) in theme.img" :key="index">
            <img style="cursor: pointer" :src="it" @click="preview($event)" height="100" width="100"/>
          </swiper-slide>
          <swiper-slide v-if="theme.vd" v-for="(i,idx) in theme.vd" :key="'a'+idx">
            <img style="cursor: pointer" src="../../../../images/marketSale/video.png" @click="preview($event,idx)" height="100" width="100"/>
          </swiper-slide>
        </swiper>
        <div class="swiper-button-prev swiper-button-blue" :class="'swiper-button-prev'+index" slot="button-prev"></div>
        <div class="swiper-button-next swiper-button-blue" :class="'swiper-button-next'+index" slot="button-next"></div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible"
               width="30%"
               append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import 'swiper/dist/css/swiper.css'
  import { isTrueReg,isTrueVd } from 'utils/mUtils'
  import videoDefalut from "../../../../images/marketSale/video.png"

  export default {
    name: "slider",
    components: {
      swiper,
      swiperSlide
    },
    props:{
      theme:{
        type: Object,
        default: () => {}
      },
      index:{
        type:Number,
        default:0
      },
      edit:{
        type:Boolean,
        default:false
      }
    },
    data(){
      return{
        swiperOption: {
          notNextTick: true,
          pagination: '.swiper-pagination',
          centerInsufficientSlides:true,
          paginationClickable: true,
          spaceBetween: 25,
          slidesPerView:'4',
          navigation: {
            nextEl: '.swiper-button-next'+this.index,
            prevEl: '.swiper-button-prev'+this.index,
          },
          uniqueNavElements:false
        },
        flow:'',
        fileList:[],
        headersSet: {
          dipsToken: sessionStorage.getItem("tokenName")
        },
        dataSetParam:{
          type: 'Document'
        },
        dialogVisible:false,
        dialogImageUrl:''
      }
    },
    mounted(){
    },
    methods:{
      arrSrc(){
        if(this.theme.vd && this.theme.vd.length > 0){
          this.theme.img = this.theme.img.concat(videoDefalut)
        }
      },
      preview(e,idx){
        if(isTrueVd(e.srcElement.currentSrc) == '0'){
          if(!this.edit){
            let fileName = this.theme.vd[idx]// 文件地址
            const blob = new Blob([fileName])
            if (window.navigator.msSaveOrOpenBlob) {

              navigator.msSaveBlob(blob, fileName) // 兼容IE10
            } else {
              let aTag = document.createElement('a')
              aTag.download = fileName
              aTag.href = URL.createObjectURL(blob)
              aTag.click()
              URL.revokeObjectURL(aTag.href)
            }
          }else {
            this.$message('暂不支持视频预览');
          }
        }else {
          this.dialogVisible = true
          this.dialogImageUrl = e.srcElement.currentSrc
        }
      },
      imgSuccess(res, file, fileList){
        let { fileUrl } = res
        if(fileUrl){
          let { raw } = file
          if(isTrueReg(raw.type) == '0'){
            this.theme.img.push('http://'+res.fileUrl)
            this.theme.imageUrl = this.theme.imageUrl+'http://'+res.fileUrl+';'
          }else {
            this.theme.img.push(videoDefalut)
            this.theme.videoUrl = this.theme.videoUrl+'http://'+res.fileUrl+';'
          }
          this.$emit('update:theme', this.theme)
        }else{
          this.$message.error('错了哦，上传失败')
        }
      }
    }
  }
</script>

<style scoped>
  .swiperWidth{
    width: 94%;
  }
  .swiper-button-prev, .swiper-button-next{
    top: 54%;
    background-size: 20px 40px;
  }
</style>
